<template>
  <div class="container">
    <el-row style="text-align:right;">
      <el-col>
        <date-range-picker
          v-model="datePicker1"
          class="w-240"
          size="small"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"/>
        <el-select v-model="listQuery.lang" class="w-140" size="small">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="small" @click="search1()">搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="echart">
      <el-col>
        <div class="title">
          <p>App功能使用人数排行（人）</p>
          <div class="btn">
            <el-button class="fr m-l-10" size="small" @click="toExport('user')">导出</el-button>
          </div>
        </div>
        <div id="num" :style="{width: '1700px', height: '380px'}"/>
      </el-col>
    </el-row>
    <el-row class="echart">
      <el-col>
        <div class="title">
          <p>App功能使用次数占比（次）</p>
          <div class="btn">
            <el-button class="fr m-l-10" size="small" @click="toExport('user')">导出</el-button>
          </div>
        </div>
        <div id="rate" :style="{width: '1700px', height: '380px'}"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import { dateShortcutKeyJS } from '@/mixins/index.js';
import timeUtils from '@/utils/timeHandle.js';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      tableName: {
        user: '活跃用户实时分布',
        read: '活跃阅读资讯人数',
        lan: '活跃用户语言类别占比',
        top: '活跃用户区域分析'
      },
      tableHead: {
        user: [
          {
            prop: 'date',
            label: '日期'
          },
          {
            prop: 'activeCount',
            label: '活跃用户'
          },
          {
            prop: 'wakeCount',
            label: '唤醒次数'
          }
        ],
        read: [
          {
            prop: 'date',
            label: '日期'
          },
          {
            prop: 'activeUserCount',
            label: '阅读资讯人数'
          },
          {
            prop: 'rate',
            label: '阅读资讯人数占比'
          }
        ],
        lan: [
          {
            prop: 'timeRange',
            label: '日期'
          },
          {
            prop: 'activeCount',
            label: '人数'
          },
          {
            prop: 'language',
            label: '语言'
          }
        ],
        top: [
          {
            prop: 'timeRange',
            label: '日期'
          },
          {
            prop: 'location',
            label: '地区'
          },
          {
            prop: 'activeCount',
            label: '活跃用户'
          }
        ]
      },
      options1: [{
        value: -1,
        label: '全部渠道'
      }, {
        value: 1,
        label: 'Android'
      }, {
        value: 2,
        label: 'IOS'
      }],
      options2: [{
        value: null,
        label: '全部版本'
      }],
      options3: [{
        value: -1,
        label: '全部系统语言'
      }, {
        value: 1,
        label: '中文'
      }, {
        value: 2,
        label: '柬文'
      }, {
        value: 3,
        label: '英文'
      }],
      options4: [{
        value: null,
        label: '所在地区'
      }, {
        value: 'China',
        label: '中国'
      }, {
        value: 'Cambodia',
        label: '柬埔寨'
      }, {
        value: 'Other',
        label: '其他'
      }],
      options5: [{
        value: 1,
        label: '用户'
      }, {
        value: 2,
        label: '会员'
      }],
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ],
      datePicker2: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ],
      listQuery: {
        startTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        endTime: timeUtils.timeHandle(new Date().getTime(), 'date'),
        lang: -1, // 渠道
        appVersion: null, // 版本
        platform: -1, // 操作语言
        country: null, // 地区
        userSelectType: 1, // 用户会员
        dateType: 1 // 0:小时; 1:日期; 2:周;3:月;
      },
      listQuery2: {
        startTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        endTime: timeUtils.timeHandle(new Date().getTime(), 'date'),
        lang: -1, // 渠道
        appVersion: null, // 版本
        platform: -1, // 操作语言
        country: null, // 地区
        userSelectType: 1, // 用户会员
        dateType: 1 // 0:小时; 1:日期; 2:周;3:月;
      },
      activeName: 'first',
      list: {
        activeCount: [], // 活跃用户
        wakeCount: [], // 唤醒次数
        readUserCount: [], // 阅读资讯人数
        rate: [] // 阅读资讯人数占比
      },
      xData1: [], // 保存活跃用户实时分布x轴数据
      xData2: [], // 保存活跃阅读资讯人数x轴数据
      legend: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '直接访问2', '邮件营销2', '联盟广告2', '视频广告2', '搜索引擎2', '直接访问3', '邮件营销3', '联盟广告3', '视频广告3', '搜索引擎3', 'fuck1', 'fuck2', 'fuck3', '数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12', '数据13', '数据14', '数据15', '数据16', '数据17', '数据18', '数据19', '数据20', '数据21', '数据22', '数据23', '数据24', '数据25', '数据26', '数据27', '数据28', '数据29', '数据30', '数据31', '数据32', '数据33', '数据34'],
      topData: [
      ], // top10数据
      languageData: [],
      exportData: {
        user: [],
        read: [],
        lan: [],
        top: []
      }
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      this.getData1();
      this.getData2();
    },
    getData1() {
      this.$nextTick(function() {
        this.updateEchart1();
      });
    },
    updateEchart1() {
      var myChart = echarts.init(document.getElementById('num'));
      myChart.showLoading();

      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    getData2() {
      this.$nextTick(function() {
        this.updateEchart2();
      });
    },
    updateEchart2() {
      var myChart = echarts.init(document.getElementById('rate'));
      myChart.showLoading();

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: [
          {
            data: this.legend.slice(0, 12),
            type: 'scroll',
            orient: 'vertical',
            right: 600,
            top: 20,
            bottom: 20
          },
          {
            data: this.legend.slice(12, 24),
            type: 'scroll',
            orient: 'vertical',
            right: 450,
            top: 20,
            bottom: 20
          },
          {
            data: this.legend.slice(24, 36),
            type: 'scroll',
            orient: 'vertical',
            right: 300,
            top: 20,
            bottom: 20
          },
          {
            data: this.legend.slice(36, 48),
            type: 'scroll',
            orient: 'vertical',
            right: 150,
            top: 20,
            bottom: 20
          }
        ],
        series: [
          {
            name: '使用次数',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
              { value: 335, name: '直接访问2' },
              { value: 310, name: '邮件营销2' },
              { value: 234, name: '联盟广告2' },
              { value: 135, name: '视频广告2' },
              { value: 1548, name: '搜索引擎2' },
              { value: 335, name: '直接访问3' },
              { value: 310, name: '邮件营销3' },
              { value: 234, name: '联盟广告3' },
              { value: 135, name: '视频广告3' },
              { value: 1548, name: '搜索引擎3' },
              { value: 234, name: 'fuck1' },
              { value: 135, name: 'fuck2' },
              { value: 1548, name: 'fuck3' },
              { value: 1548, name: '数据1' },
              { value: 1548, name: '数据2' },
              { value: 2548, name: '数据3' },
              { value: 1548, name: '数据4' },
              { value: 1548, name: '数据5' },
              { value: 1548, name: '数据6' },
              { value: 1548, name: '数据7' },
              { value: 1548, name: '数据8' },
              { value: 1548, name: '数据9' },
              { value: 548, name: '数据10' },
              { value: 548, name: '数据11' },
              { value: 548, name: '数据12' },
              { value: 548, name: '数据13' },
              { value: 548, name: '数据14' },
              { value: 548, name: '数据15' },
              { value: 548, name: '数据16' },
              { value: 548, name: '数据17' },
              { value: 548, name: '数据18' },
              { value: 548, name: '数据19' },
              { value: 548, name: '数据20' },
              { value: 548, name: '数据21' },
              { value: 548, name: '数据22' },
              { value: 548, name: '数据23' },
              { value: 548, name: '数据24' },
              { value: 548, name: '数据25' },
              { value: 548, name: '数据26' },
              { value: 548, name: '数据27' },
              { value: 548, name: '数据28' },
              { value: 548, name: '数据29' },
              { value: 548, name: '数据30' },
              { value: 548, name: '数据31' },
              { value: 548, name: '数据32' },
              { value: 548, name: '数据33' },
              { value: 548, name: '数据34' }

            ]
          }
        ]
      };
      myChart.setOption(option, true);
      myChart.hideLoading();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 15px;
    .w-140 {
        width: 140px;
    }
    .w-240 {
        width: 240px;
    }
    .echart {
        padding-top: 15px;
        .title {
            height: 32px;
            position: relative;
            margin-bottom: 15px;
            p {
                font-size: 22px;
                line-height: 32px;
                text-align: center;
            }
            .btn {
                width: 400px;
                height: 32px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
}
</style>
